<template>
  <div>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="表单" name="1">
      <el-form :model="form" ref="ruleFormRef" label-width="auto" style="max-width: 600px">
        <el-form-item label="Activity name">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="Activity form">
          <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="Instant delivery">
          <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form></el-tab-pane
    >
    <el-tab-pane label="socket.io" name="2">
      <el-card class="box-card">
        <div v-for="(item,index) in chatList" :key="index">
          <span >{{ item.text }} </span>
          <span>{{ item.user }}</span>
        </div>
      </el-card>

      <div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="success" round @click='send'>发送</el-button>
      </div>

      <el-button @click="connect()">Connect</el-button>
      <el-button @click="disconnect()">Disconnect</el-button>
    </el-tab-pane>
  </el-tabs>

  <div style="padding: 50px"></div>
</div>
</template>

<script lang="ts" setup>
import { onUnmounted, onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { createOrUpdate, sendMessage } from '/@/api/apitest'

// do not use same name with ref
const form = reactive( {
  name : '',
  region : '',
  date1 : '',
  date2 : '',
  delivery : false,
  type : [],
  resource : '',
  desc : ''
} )
const activeName = ref( '1' )
const input = ref( '' )
const chatList = reactive( [] )
const ruleFormRef = ref<FormInstance>()

const handleClick = () => {
  activeName.value = activeName.value === '1' ? '2' : '1'
}

const send = async() => {
  // socket.emit( 'chat:message', input.value )
}
const onSubmit = async() => {
  console.log( 'submit!' )
  const data = await createOrUpdate( form )

  console.log( '🐯🐯🐯 ~ file: index.vue:88 ~ onSubmit ~ data：', data )
}
</script>
